<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #body{
        width: 1440px;
        height: 550px;
        background-color: #0AA1DE;
    }
    .tou{
        font-size: 16px;
        position: relative;
        left:102px
    }
    #title{
        width: 1200px;
        height: 20px;
        position: relative;
        left:100px
    }

    #year{
        width: 1200px;
        height:20px;
        position: relative;
        left:100px
    }

    #content{
        width: 1200px;
        height: 150px;
        position: relative;
        left:100px
    }
    .form-group{
        position: relative;
        left:100px;
        top: 10px;
    }


    .text-center>button{
        background-color: red;
        width: 200px;
        height: 50px;
        border-radius: 10px;
        position: relative;
        left:600px;
        top:20px;
        font-size: 25px;
        font-family: SimHei;
    }



</style>

<body>
<div id="body">
    <form action="">
        <p class="tou">标题</p>
        <input type="text" id="title" name="title">

        <p class="tou">timeyear</p>
        <input type="text" id="year"  name="timeyear">


        <p class="tou">作品简介</p>
        <input type="text" id="content" name="content">


        <div class="form-group">
            <label for="exampleInputFile" >选择文件</label>
            <input type="file" id="exampleInputFile" name="file">
        </div>

        <div class="text-center">
            <button type="button" @click="send()" class="btn btn-danger btn-lg ">发布作品</button>
        </div>
    </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<script>
    let vm =new Vue({
        el:"form",
        data:{
            goods:[]
        },
        created:function () {
            //发出异步请求获取分类信息
            axios.get("/selectgoods").then(function (response) {
                vm.goods=response.data;
            }).catch(function (err) {
                alert(err);
            })
        },
        methods: {
           send:function () {
               //判断是否选择了文件
               if ($("input:last").val()==""){
                   alert("请选择上传的文件");
                   return;
               }
               //得到表单数据
               let data =new FormData($("form")[0]);
               //发出异步请求
               axios.post("/jingpin",data).then(function (response) {
                   alert("发布完成!");
               }).catch(function (err) {
                   alert(err);
               })
           }
        }
    })
</script>



</body>
</html>